<?php 
exit;
?><!DOCTYPE html>
<html>
<head>
<title>周生生</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="true"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<style>
html,body{background-color:#a0a0a2;}
body,div{margin:0px;padding:0px;margin:0px auto;}
body, h1, h2, h3, h4, a{ font-family:'MHeiPRC-Bold', '微软雅黑', 'Microsoft YaHei';}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
* {-webkit-text-size-adjust: none;}
img,input, button{ -webkit-appearance: none; background: none; padding: 0; outline-style:none; border: none; }
.clear{clear:both;}
img{border:none;} .gbrel{position: relative;width:100%;margin:0px auto;}
.gwimg img{width:100%;} .gleft{float:left;} .gright{float:right;}
.container{position:relative;margin:0px auto;width:768px;height:961px;opacity:0;}
.p3{position:absolute;width:100%;height:100%;}
.p3{background: transparent url('./images/p3.jpg') no-repeat top center;background-size: cover;}
.p3 .t1{position:absolute;width:178px;height:176px;top:194px;left:80px;background:transparent url('./images/p3-1.png') no-repeat;background-size: cover;}
.p3 .t2{position:absolute;width:177px;height:178px;top:382px;left:80px;background:transparent url('./images/p3-2.png') no-repeat;background-size: cover;}
.p3 .t3{position:absolute;width:176px;height:175px;top:578px;left:80px;background:transparent url('./images/p3-3.png') no-repeat;background-size: cover;}
.p3 .t4{position:absolute;width:174px;height:173px;top:220px;left:296px;background:transparent url('./images/p3-4.png') no-repeat;background-size: cover;}
.p3 .t5{position:absolute;width:176px;height:175px;top:414px;left:296px;background:transparent url('./images/p3-5.png') no-repeat;background-size: cover;}
.p3 .t6{position:absolute;width:175px;height:176px;top:604px;left:296px;background:transparent url('./images/p3-6.png') no-repeat;background-size: cover;}
.p3 .t7{position:absolute;width:178px;height:175px;top:196px;right:76px;background:transparent url('./images/p3-7.png') no-repeat;background-size: cover;}
.p3 .t8{position:absolute;width:177px;height:175px;top:390px;right:76px;background:transparent url('./images/p3-8.png') no-repeat;background-size: cover;}
.p3 .t9{position:absolute;width:177px;height:179px;top:582px;right:76px;background:transparent url('./images/p3-9.png') no-repeat;background-size: cover;}
.p3 .zi{position:absolute;display:none;width:408px;height:91px;top:790px;left:182px;background:transparent url('./images/p3-wenzi.png') no-repeat;background-size: cover;}
.logo{position:absolute;right:54px;top:48px;width:82px;height:81px;background:transparent url('images/s-logo.png') no-repeat;background-size:cover;-webkit-transition: all 0.4s ease-out;opacity: 0;-webkit-transform:translate(0px,-20px) scale(1.4,1.4);}
.title{position:absolute;left:200px;top:140px;width:366px;height:64px;background:transparent url('images/s-t1.png') no-repeat;background-size:cover;}
.p3 .ka{display:none;}
.p-in{-webkit-transform:translate(0,0) scale(1,1);opacity:1;}
.p4, .p5, .p6, .p7{z-index:9999;}
.p4{position:absolute;display:none;width:100%;height:100%;background:transparent url('./images/p3.jpg')no-repeat top center;background-size:cover;}
.p4 .tu{position:absolute;width:241px;height:183px;top:360px;left:254px;background:transparent url('./images/p4-tu.png') no-repeat;background-size: cover;}
.p4 .home{position:absolute;width:68px;height:67px;top:806px;left:356px;background:transparent url('./images/p4-fanan.png') no-repeat;background-size: cover;}
.p4 .again{position:absolute;width:69px;height:62px;top:866px;left:446px;background:transparent url('./images/again.png') no-repeat;background-size: cover;}
.p5{position:absolute;display:none;width:100%;height:100%;background:transparent url('./images/p3.jpg')no-repeat top center;background-size:cover;}
.p5 .tu{position:absolute;width:260px;height:562px;top:220px;left:254px;background:transparent url('./images/p5-tu.png') no-repeat;background-size: cover;}
.p5 .home{position:absolute;width:68px;height:67px;top:806px;left:356px;background:transparent url('./images/p4-fanan.png') no-repeat;background-size: cover;}
.p6{position:absolute;display:none;width:100%;height:100%;background:transparent url('./images/p3.jpg')no-repeat top center;background-size:cover;}
.p6 .tu{position:absolute;width:474px;height:518px;top:220px;left:154px;background:transparent url('./images/p6-tu.png') no-repeat;background-size: cover;}
.p6 .home{position:absolute;width:68px;height:67px;top:806px;left:356px;background:transparent url('./images/p4-fanan.png') no-repeat;background-size: cover;}
.p7{position:absolute;display:none;width:100%;height:100%;background:transparent url('./images/p3.jpg')no-repeat top center;background-size:cover;}
.p7 .tu{position:absolute;width:366px;height:348px;top:220px;left:199px;background:transparent url('./images/p7-tu.png') no-repeat;background-size: cover;}
.p7 .home{position:absolute;width:68px;height:67px;top:806px;left:356px;background:transparent url('./images/p4-fanan.png') no-repeat;background-size: cover;}
.p7 .logo{position:absolute;right:69px;top:866px;width:72px;height:67px;background:transparent url('images/p1-logo.png') no-repeat;background-size:cover;-webkit-transition: all 0.4s ease-out;}
.p7 .ti{position:absolute;width:275px;height:143px;top:660px;left:245px;background:transparent url('./images/p7-ti.png') no-repeat;background-size: cover;}
.p7 .juan{position:absolute;right:276px;top:574px;display:block;}
.animatedTwo{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
</style>
</head>
<body>
<div class="container">
   <div class="p3">
	    <div class="logo"></div>
	    <div class="title animated zoomIn"></div>
	    <div class="t1 animated zoomIn ka"></div>
	    <div class="t2 animated zoomIn ka"></div>
	    <div class="t3 animated zoomIn ka"></div>
	    <div class="t4 animated zoomIn ka"></div>
	    <div class="t5 animated zoomIn ka"></div>
	    <div class="t6 animated zoomIn ka"></div>
	    <div class="t7 animated zoomIn ka"></div>
	    <div class="t8 animated zoomIn ka"></div>
	    <div class="t9 animated zoomIn ka"></div>
	    <div class="zi animated zoomIn"></div> 
	    
   </div>
   <div class="p4 animated zoomIn">
        <div class="logo"></div>
	    <div class="title"></div>
	    <div class="tu"></div>
        <div class="home"></div>
   </div>
   <div class="p5 animated zoomIn">
         <div class="logo"></div>
	    <div class="title"></div>
        <div class="tu"></div>
        <div class="home"></div>
   </div>
   <div class="p6 animated zoomIn">
        <div class="logo"></div>
	    <div class="title"></div>
	    <div class="tu"></div>
       <div class="home"></div>
       
   </div>
   <div class="p7 animated zoomIn">
        <div class="logo"></div>
	    <div class="title"></div>
        <div class="tu"></div>
       <img class="juan" src="juan-img/<?php echo $juancode; ?>.png">
       <div class="ti"></div>
       <div class="home"></div>
      
   </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
<script src="js/pxloader-images.min.js"></script>
<script>
var loader = new PxLoader();
var _img=['p3.jpg'];
for(var i=0; i<_img.length; i++){loader.addImage('images/'+_img[i]);}
loader.start();
loader.addCompletionListener(function() { 
	$(".container").animate({ opacity: 1 });
	window.setTimeout(function(){ $('.t1').show();  }, 600);
	window.setTimeout(function(){ $('.t2').show();  }, 700);
	window.setTimeout(function(){ $('.t3').show();  }, 800);
	window.setTimeout(function(){ $('.t4').show();  }, 900);
	window.setTimeout(function(){ $('.t5').show();  }, 1000);
	window.setTimeout(function(){ $('.t6').show();  }, 1100);
	window.setTimeout(function(){ $('.t7').show();  }, 1200);
	window.setTimeout(function(){ $('.t8').show();  }, 1300);
	window.setTimeout(function(){ $('.t9').show();  }, 1400);
	window.setTimeout(function(){ $('.p3 .zi').show();  }, 1600);
	window.setTimeout(function(){ $('.logo').addClass("p-in");  }, 1000);
}); 
$(function(){
	var _canClick=true;
	$(".ka").click(function(){
		if(false == _canClick){return ;}
		_canClick=false;
		$(".ka").removeClass("animated").removeClass("zoomIn");
		$(this).addClass("animated").addClass("tada");
		<?php
		$rand=2;
        if(1 == $rand){ ?>
		    window.setTimeout(function(){ $(".p6").show(); }, 1100);
		<?php }elseif (2 == $rand){ ?>
		    window.setTimeout(function(){ $(".p5").show(); }, 1100);
		<?php }elseif(3 == $rand){ ?>
		    window.setTimeout(function(){ $(".p7").show(); }, 1100);
		<?php }else{ ?>
		    window.setTimeout(function(){ $(".p4").show(); }, 1100);
		<?php } ?>
		var _tname='';
        if($(this).hasClass("t1")){_tname='t1';}
        if($(this).hasClass("t2")){_tname='t2';}
        if($(this).hasClass("t3")){_tname='t3';}
        if($(this).hasClass("t4")){_tname='t4';}
        if($(this).hasClass("t5")){_tname='t5';}
        if($(this).hasClass("t6")){_tname='t6';}
        if($(this).hasClass("t7")){_tname='t7';}
        if($(this).hasClass("t8")){_tname='t8';}
        if($(this).hasClass("t9")){_tname='t9';}
		$.post("count.php", { name:_tname},function(data){});

    });
	$(".home").click(function(){
		window.location.href="index.php";
	});
    $(".again").click(function(){
    	window.location.href="show.php?p=<?php echo $_GET['p']; ?>";
	});
});
</script>
</body>
</html>